<template>
	<view class="container">
		<com-head textTit="会员卡" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="tabWrap__view">
			<view class="tabWrap__view-name" v-for="(item,i) in cateList" :class="tabIndex == i ? 'tab-active' : ''" @click="tabsClick(item,i)">
				{{item.name}}
				<image v-if="tabIndex == i" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg234567.png" class="bg" />
			</view>
		</view>

		<view v-if="list.length" class="list" v-for="(ele,index) in list" :key="index"  @click.stop="goDetails(ele)">
		   <image :src="ele.img || '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/vip.png'" mode="aspectFill"></image>
		   <view class="content">
			   <view class="vipPrice">{{ele.title || '-'}}
					<text v-if="ele.discount != '10' && tabIndex == 0">享受折扣{{ele.discount || '-'}}折</text>
			   </view>
		   	  <view class="head">
		   	  	  <text class="price"><text class="pls"><text>¥</text>{{ele.price}}</text> <text class="plText" v-if="ele.give_price*1">送{{Number(ele.give_price).toFixed(0)}}</text></text>
		   	  </view>
			  <view class="shopC">
					<!-- 门店 -->
					<view class="storeList" v-if="tabIndex == 0">
						{{toStore.cate_type == 2 ? "通用门店: 全部 " : ("指定门店: " + ele.store.title)}}
					</view>
					<!-- 平台 -->
					<view class="storeList" v-if="tabIndex == 1">
						全平台通用
					</view>
			  </view>
			  <view class="bottom">
					<!-- <button open-type='share' class="sharebtn" @click="shareFun(ele)">
						<view class="buy" v-if="ele.status == 1">分享</view>
					</button>
					<view class="buy" v-if="ele.status == 1" @click.stop="binding(ele)">绑定</view> -->
					<view class="buy" @click.stop="openVip(ele)">立即购买</view>
			  </view>
		   </view>
		</view>
		<!-- 没有数据时 -->
		<view class="noDate" v-else>
			<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tijiao2.png" mode=""></image>
			<view>暂无订单数据~</view>
		</view>
		
		
		<view class="nodata">已经到底了，去其他页面逛逛吧</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list:[{}],
				scrollTop: 0,
				cateList:[{name: '门店会员卡', id: 0}, {name: '平台会员卡', id: 1}],
				tabIndex:0,
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad() {
			this.getVipList()
		},
		methods: {
			// 项目分类切换
			tabsClick(ele,index){
				this.list = []
				this.page=1
				this.tabIndex = index
				this.getVipList()
			},
			goDetails(ele){
				// this.utlis.goUrl(`/pages/mine/vipDetails?id=${ele.id}`)
			},
			async openVip(ele){
				this.utlis.goUrl(`/pages/mine/openVip?id=` + ele.id + '&type=' + this.tabIndex)
				// uni.showToast({
				// 	icon:"none",
				// 	duration:3000,
				// 	title:"会员卡暂不支持线上办理，请到线下门店进行购买~"
				// })
			},
			// 获取用户信息
			async getVipList(){
				let API = this.tabIndex == 0 ? this.$u.api.getvip : this.$u.api.getSysVip
				let {data,code} = await API({store_id:this.store_id});
				if(code){
					for (let key in data) {
						if(data[key].store_id != 0 && data[key].store.length){
							data[key].store.forEach(val=>{
								val.name = val.title.replace('（','').replace('）','')
								console.log(val.name,"val.name")
							})
						}
					}
					this.list = data
					console.log(this.list,"8888")
				}
			},
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 30rpx;
	.list{
		width: 686rpx;
		height: 350rpx;
		position: relative;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
		overflow: hidden;
		margin-top: 20rpx;
		image{
			width: 686rpx;
			height: 350rpx;
			position: absolute;
			top: 0;
			z-index: 1;
		}
		.content{
			width: 686rpx;
			height: 376rpx;
			position: absolute;
			top: 0;
			z-index: 2;
			padding: 30rpx 36rpx 36rpx 40rpx;
			.vipPrice{
				font-size: 32rpx;
				color: #AA5200;
				margin-bottom: 10rpx;
				text{
					margin-left: 20rpx;
				}
			}
			.discount{
				width: 100%;
				text-align: right;
				color: #FFFFFF;
				font-size: 36rpx;
			}
			.head{
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				// align-items: center;
				.price{
					font-size: 64rpx;
					font-weight: 500;
					color: #AA5200;
					line-height: 65rpx;
					text{
						margin-left: 24rpx;
						color: #AA5200;
						font-size: 64rpx;
						// margin-left: 14rpx;
					}
					.pls{
						margin-left: 0rpx !important;
						font-weight: bold;
					  background: -webkit-linear-gradient(left, #CD7122, #FDAD35);
					  -webkit-background-clip: text;
					  -webkit-text-fill-color: transparent;
					  background-clip: text;
					  text-fill-color: transparent;
						text{
							margin-left: 0rpx !important;
							margin-right: 10rpx;
						}
					}
					.plText{
						font-size: 50rpx;
					}
				}
				.right{
					display: flex;
					align-items: center;
					color: #007664;
					font-size: 26rpx;
					position: absolute;
					top: 30rpx;
					right: 36rpx;
					text{
						margin-left: 13rpx;
					}
				}
				.t1{
					color: #A08761;
				}
				.t2{
					color: #90929C;
				}
				.t3{
					color: #C2A060;
				}
			}
			.bottom{
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				position: relative;
				font-size: 28rpx;
				color: #AA5200;
				margin-top: 60rpx;
				// width: 100%;
				.buy{
					width: 200rpx;
					height: 65rpx;
					line-height: 65rpx;
					text-align: center;
					padding: 0 40rpx;
					
					background: linear-gradient(85deg, #DB985A, #AA5200);;
					border-radius: 100rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					margin-left: 8rpx;
					
					position: absolute;
					right: 0;
				}
			}
		}
	}
	
	.shopC{
		font-size: 28rpx;
		color: #AA5200;
	}
	
	.nodata{
		color: #CACACA;
		font-size: 24rpx;
		text-align: center;
		margin-top: 193rpx;
	}
}

.tabWrap__view{
	display: flex;
	margin: 20rpx 0 45rpx 0;
	&-name{
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		color: #999999;
		position: relative;
		.bg{
			width: 40%;
			height: 8rpx;
			position: absolute;
			bottom: -10rpx;
			left: 30%;
		}
	}
}
.tab-active{
	color: #242833;
	font-weight: bold;
}		

.sharebtn{
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 100rpx;
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
